<template>
  <div id="friedn-card-body">
    <header id="header" class="mui-bar mui-bar-transparent">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @click="$router.goBack()"></a>
      <button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" @click="toFriendEdit">设置</button>
    </header>
    <div class="friedn-card-banner">
      <img :src="card_backgroud" alt />
    </div>
    <div class="friedn-card-detail">
      <div class="friedn-card-detail-header">
        <img :src="cardData.user_header" alt />
        <div class="friedn-card-detail-header-name">
          <span class="friedn-card-detail-alias">
            <div v-if="cardData.isFriend == 1">{{ cardData.group.friend_alias }}</div>
            <div v-else>{{ cardData.user_name }}</div>
          </span>
          <span class="friedn-card-detail-id">
            <div>ID：{{ cardData.user_id }}</div>
            <div v-if="cardData.isFriend == 1">( {{ cardData.user_name }} )</div>
          </span>
          <span class="friedn-card-detail-sex-panel">
            <span class="friedn-card-detail-sex">
              <div v-if="cardData.user_sex == 1">男</div>
              <div v-else>女</div>
            </span>
            <span class="friedn-card-detail-constellation">{{ cardData.user_constellation }}</span>
          </span>
        </div>
      </div>
      <div class="friedn-card-detail-other">
        <ul>
          <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
              <label>
                <van-icon name="cluster-o" />
              </label>
              总经理
            </a>
          </li>
          <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
              <label>
                <van-icon name="birthday-cake-o" />
              </label>
              {{ cardData.user_age }}
            </a>
          </li>
          <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
              <label>
                <van-icon name="location-o" />
              </label>
              {{ cardData.user_address }}
            </a>
          </li>
          <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
              <label>
                <van-icon name="flower-o" />
              </label>
              {{ cardData.user_animals }}
            </a>
          </li>

          <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
              <label>
                <van-icon name="diamond-o" />
              </label>
              TA还未开通任何特殊权限
            </a>
          </li>
          <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
              <label>
                <van-icon name="star-o" />
              </label>
              {{ cardData.user_name }}的个人动态
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="friedn-card-footer">
      <div>
        <button
          type="button"
          class="mui-btn"
          @click="toVedioChat"
          v-if="cardData.isFriend == 1"
        >音视频通话</button>
        <button type="button" class="mui-btn" @click="toAddFriend" v-else>加为好友</button>
        <button type="button" class="mui-btn mui-btn-primary" @click="toSendChat">发送消息</button>
      </div>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
import Vue from "vue";
import axios from "axios";
import { api } from "../assets/js/api";
import { Toast } from "vant";
import { Icon } from "vant";

Vue.use(Icon);

export default {
  data() {
    return {
      card_backgroud:
        "http://contact.yhong.info/uploads/img/default_card_backgroud.jpg",
      cardData: [],
      friend_id: ""
    };
  },
  methods: {
    goBack: function() {
      this.$router.go(-1);
    },
    toVedioChat: function() {
      alert("视频聊天");
    },
    toAddFriend: function() {
      this.$router.push({
        path: "/AddFriendPush",
        query: {
          friend_id: this.friend_id,
          user_name: this.cardData.user_name
        }
      });
    },
    toSendChat: function() {
      if (this.cardData.isFriend) {
        var friend_id = this.cardData.user_id;
        this.$router.push({
          path: "/Chat",
          query: {
            friend_id: friend_id,
            friend_alias: this.cardData.group.friend_alias
          }
        });
      } else {
        Toast("该用户不是你好友，请添加");
      }
    },
    toFriendEdit: function() {
      var friend_id = this.cardData.user_id;
      this.$router.push({
        path: "/FriendEdit",
        query: {
          friend_id: friend_id
        }
      });
    }
  },
  created() {
    var friend_id = this.$route.query.friend_id;
    this.friend_id = this.$route.query.friend_id;
    if (friend_id == null) {
      Toast("未知错误");
      this.$router.go(-1);
      return false;
    }
    axios({
      method: "post",
      url: api.friend.getFriendById,
      data: {
        target_id: friend_id
      }
    }).then(res => {
      res = res.data;
      this.cardData = res.data;
    });
  }
};
</script>
<style>
@import "../assets/css/card.css";
</style>